<template>
  <div class="product-container">
    <el-row>
      <el-col :span="24">
        <normal-filter :filterProps="filterProps" />
      </el-col>
    </el-row>
    <el-row>
      <el-button type="primary" icon="el-icon-plus" @click="addContent"
        >添加消息模板</el-button
      >
    </el-row>
    <el-row class="table-container">
      <Table
        :columnProps="columnProps"
        :tableData="tableData"
        :showHandle="true"
        :pagination="pagination"
        :hideDeleteBtn="true"
        @currentPage="goCurrent"
        @delete="del"
        @modify="modify"
        @sizeChange="sizeChange"
      >
      </Table>
    </el-row>
  </div>
</template>

<script>
import normalFilter from "@/components/NormalFilter";
import Table from "@/components/Table";
import { getList} from "@/api/msgTpl";
import { pagination, page } from "@/utils/enumConfig";
import { Message } from "element-ui";

export default {
  name: "article",
  components: {
    normalFilter,
    Table,
  },
  data() {
    const filterProps = {
      filterItems: [
        {
          type: "input",
          id: "name",
          title: "姓名",
          placeholder: "请输入",
        },
        {
          type: "input",
          id: "phone",
          title: "手机号",
          placeholder: "请输入",
        },
      ],
      onFilterChange: (value) => {
        this.filterParam = value;
        this.getList({
          ...value,
          ...page,
        });
      },
    };
    const columnProps = [
      {
        title: "姓名",
        dataIndex: "name",
        key: "name",
      },
      {
        title: "地区",
        dataIndex: "area",
        key: "area",
      },
      {
        title: "来源",
        dataIndex: "source",
        key: "source",
      },
      {
        title: "手机号",
        dataIndex: "phone",
        key: "phone",
      },
      {
        title: "创建时间",
        dataIndex: "createTime",
        key: "createTime",
      },
    ];
    return {
      filterProps,
      columnProps,
      list: [],
      tableData: [],
      pagination: this.$_.cloneDeep(pagination),
      filterParam: null,
      showImportModal: false,
      showDistribution: false, //划转弹框显隐
      file: null,
      loading: false,
      selectedRows: [], //选中名单库得行
    };
  },
  async created() {
    let { pageIndex } = this.pagination;
    let param = {
      current: pageIndex,
    };
    this.getList(param);
  },
  methods: {
    addContent() {
      this.$router.push("/messageTpl/add");
    },
    goCurrent(currentIndex) {
      let { pageSize, pageIndex } = this.pagination;
      let param = {
        ...this.filterParam,
        current: currentIndex,
        size: pageSize
      };
      this.getList(param);
    },
    sizeChange(size) {
      let param = {
        ...this.filterParam,
        current: 1,
        size
      };
      this.$set(this.pagination, "pageSize", size);
      this.getList(param);
    },
    modify({ id }) {
      this.$router.push({ path: `/customerBase/update/${id}` });
    },
    async getList(param = { current: 1 }) {
      let { records, size, total, current } = await getList(param),
        page = this.pagination;
      this.pagination = {
        ...page,
        totalElements: total,
        pageIndex: current,
      };
      this.tableData = records;
    },
  },
};
</script>

<style lang="scss" scoped>
.product-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  .table-container {
    margin-top: 20px;
  }
}
</style>
